<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <span th:include="~{include::xxx}"></span>
    <style>
        ul li{
            margin-right: 100px;
        }
        ul li a{
            text-decoration: none;
        }
    </style>
    <script>
        $(function(){
            $("[name='username']").blur(function (){
                 let name = $(this).val();
                 if(name.length==0) {
                         $("#sp_name").html("<font color='red'>姓名不能为空</font>");
                 }else{
                     $.getJSON(
                         '/isChinese/'+name,
                          function (obj){
                             if(obj){
                               $("#sp_name").html("<font color='green'>OK</font>");
                             }else{
                                 $("#sp_name").html("<font color='red'>姓名必须是中文</font>");
                             }
                          }
                     )
                 }
            });
            $("[name='iden']").blur(function (){
                let iden = $(this).val();
                if(iden.length ==0){
                    $("#sp_card").html("<font>身份证不能为空！</font>");
                }else{
                    $.get(
                        "/isIden/"+iden,
                        function (obj){
                            if(obj){
                                $("#sp_card").html("<font color='green'>OK</font>");
                            }else{
                                $("#sp_card").html("<font color='red'>身份证格式错误！</font>");
                            }
                        }
                    )
                }
            });
            //根据省份获取市
            $("#prov").change(function (){
                 let pid=$(this).val();
                 alert(pid);
                 $.get(
                     "/findCity/"+pid,
                     function (obj){
                         $("#city").empty();
                         $("#city").append(" <option>--请选择--</option>");
                         for(let i in obj){
                             $("#city").append("<option value='"+obj[i].cid+"'>"+obj[i].cname+"</option>");
                         }
                     }
                 )
            })

            //根据市获取区域
            $("#city").change(function (){
                let cid=$(this).val();
                alert(cid);
                $.get(
                    "/findArea/"+cid,
                    function (obj){
                        $("#area").empty();
                        $("#area").append(" <option>--请选择--</option>");
                        for(let i in obj){
                            $("#area").append("<option value='"+obj[i].aid+"'>"+obj[i].aname+"</option>");
                        }
                    }
                )
            })
        })
    </script>
</head>
<body>
       <div class="container">
           <div class="alert alert-success">
               <marquee>
               <h3>振涛银行欢迎您</h3>
               </marquee>
           </div>

           <ul class="nav nav-pills">
               <li class="active"><a href="#">首页</a></li>
               <li><a href="register">注册</a></li>
               <li><a href="#">登录</a></li>
               <li><a href="#">明细</a></li>
               <li><a href="#">注销</a></li>
           </ul>
          <br>

           <form class="form-horizontal" role="form" method="post"  enctype="multipart/form-data">
               <div class="form-group">
                   <label  class="col-sm-2 control-label">姓名：</label>
                   <div class="col-sm-4">
                       <input type="text" class="form-control" name="username" placeholder="中文姓名">
                       <span id="sp_name"></span>
                   </div>
               </div>

               <div class="form-group">
                   <label  class="col-sm-2 control-label">身份证：</label>
                   <div class="col-sm-4">
                       <input type="text" class="form-control"  name="iden" placeholder="身份证">
                       <span id="sp_card"></span>
                   </div>
               </div>
               <div class="form-group">
                   <label  class="col-sm-2 control-label">地址：</label>
                   <div class="col-sm-4">
                       <select id="prov" name="pid">
                           <option>--请选择--</option>
                           <option th:each="prov:${ps}" th:object="${prov}" th:value="*{pid}" th:text="*{pname}">
                           </option>
                       </select>省
                       <select id="city" name="cid"></select>市
                       <select id="area" name="aid"></select>区
                   </div>
               </div>
               <div class="form-group">
                   <label  class="col-sm-2 control-label">头像：</label>
                   <div class="col-sm-offset-2 col-sm-4">
                       <div class="checkbox">
                           <input type="file" name="file">
                       </div>
                   </div>
               </div>
               <div class="form-group">
                   <div class="col-sm-offset-2 col-sm-4">
                       <button class="btn btn-success">注册</button>
                   </div>
               </div>
           </form>

       </div>
</body>
</html>
